<template>
  <div id="app">
    <div class="container" v-show="$parent.isShowLoading">
      <div class="page-loading">
        <span class="span"></span>
        <span class="span"></span>
        <span class="span"></span>
        <span class="span"></span>
      </div>
      努力加载中...
    </div>

    <Play
      v-if="currentMusic"
      :currentMusic="currentMusic"
      :playlist="playlist"
      :lyric="lyric"
      :currentIndex="currentIndex"
      @update:paused="paused = $event"
      @update:loop="loop = $event"
      @update:music="
        currentMusic = $event.item;
        currentIndex = $event.index;
      "
    />

    <HomeNav v-if="$route.meta.isShowNav" />

    <!-- <router-view
      @translate-music="currentMusic = $event"
      v-bind:currentMusic.sync="currentMusic"
    /> -->

    <keep-alive>
      <router-view
        @update:music="
          currentMusic = $event.item;
          currentIndex = $event.index;
        "
        @update:playlist="playlist = $event"
        v-bind:currentMusic="currentMusic"
        v-bind:paused="paused"
      />
    </keep-alive>
  </div>
</template>

<script>
import HomeNav from "@/components/HomeNav.vue";
import Play from "@/components/Play.vue";
export default {
  components: {
    HomeNav,
    Play,
  },
  data: function () {
    return {
      currentMusic: null,
      paused: null,
      playlist: [],
      currentIndex: 0,
      lyric: null,
    };
  },
  created() {
    // console.log(this.$parent);
  },

  // watch: {
  //   "$parent.msg": function (n) {
  //     console.log(n);
  //   },
  // },
  watch: {
    currentMusic: function () {
      this.$root.isShowLoading = true;
      this.axios
        .get("/lyric?id=" + this.currentMusic.id)
        .then((response) => {
          let lyric = response.data.lrc.lyric;
          this.lyric = this.paresLyric(lyric);
        })
        .finally(() => {
          this.$root.isShowLoading = false;
        });
    },
  },
  methods: {
    paresLyric(lyric) {
      var patt = /\[\d{2}:\d{2}\.\d{2,3}\]/gi;
      var arr = lyric
        .split("\n")
        .filter((e) => e)
        .map((str) => {
          var time = str.match(patt)[0].replace(/(\[|\])/gi, "");
          var timeArr = time.split(":");
          time = Number(timeArr[0]) * 60 + Number(timeArr[1]);
          var text = str.replace(patt, "");
          return { time, text };
        });
      return arr;
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 300ms;
  /* --animate-delay: 0.9s; */
}

.container {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 45%;
  left: 35%;
  align-items: center;
  height: 20px;
  line-height: 20px;
  z-index: 999;
}
.page-loading {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 30px;
  margin-right: 5px;
}
.span {
  width: 3px;
  height: 10px;
  background-color: red;
}

.span:nth-of-type(1) {
  animation: grow 1s -0.45s ease-in-out infinite;
}

.span:nth-of-type(2) {
  animation: grow 1s -0.3s ease-in-out infinite;
}

.span:nth-of-type(3) {
  animation: grow 1s -0.15s ease-in-out infinite;
}

.span:nth-of-type(4) {
  animation: grow 1s ease-in-out infinite;
}
@keyframes grow {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
}
</style>
